{% extends "base.html" %}

{% block content %}

<script>
        $(document).ready(function(){
            // Pre-populated initial data at page load
            var content_data = {{ content_data }};

            rivets.bind($("div#content"), content_data);
	
            var refresh = function() {
                $.get("{{ url_prefix }}/perf_counters/" + content_data.service_type  + "/" + content_data.service_id, function(data) {
                    _.extend(content_data, data);
                    setTimeout(refresh, 3000);
                });
            };
        
            setTimeout(refresh, 1000);
        });
</script>


<section class="content-header">
    <h1>
        {service_type}.{service_id}
    </h1>
</section>

<section class="content">
<div class="box">
    <div class="box-header">
        <h3 class="box-title">Performance Counters</h3>
    </div>
    <div class="box-body">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
		<th>Value</th>
            </tr>
            </thead>
            <tbody>
            <tr rv-each-item="counters">
                <td>{item.name}</td>
                <td>{item.description}</td>
		<td>{item.value | dimless} {item.unit}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</section>
<!-- /.content -->

{% endblock %}
